<template>
  <div class="header-container">
    <div class="header-left">
      <div class="header-left-date"  >{{currentDate}}</div>
      <div class="header-left-time">{{nowTime}}</div>
      <div class="header-left-weekDay">{{currentWeekDay}}</div>
    </div>
    <div class="header-center">
      <span class="title-text">{{centerTitle}}</span>
    </div>
    <div class="header-right">
      <div class="setting-item setting-user">
        <el-dropdown trigger="click" >
          <div class="user-avatar" >
            <div class="scan-line" ></div>
            <img src="@/assets/imgs/home/user-icon.png" alt="" class="user-icon">
            <div class="ring-effect"></div>
          </div>
          <template #dropdown>
            <el-dropdown-menu  class="header-dropdownPop">
              <div class="tech-dropdown-scanline"></div>
              <div class="tech-dropdown-corner top-left"></div>
              <div class="tech-dropdown-corner top-right"></div>
              <div class="tech-dropdown-corner bottom-right"></div>
              <div class="tech-dropdown-corner bottom-left"></div>
              <el-dropdown-item @click="goLayout">
                <div class="tech-dropdown-item">                
                  <span>管理系统</span>
                  <div class="tech-beam"></div>
                </div>
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>    
        <div class="hud-corner top-left"></div>
        <div class="hud-corner top-right"></div>
        <div class="hud-corner bottom-right"></div>
        <div class="hud-corner bottom-left"></div>
        <div class="beam-effect"></div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'Header',
})
</script>
<script setup  lang="ts">
import dayjs from "dayjs"
import { useRouter } from 'vue-router'
const router = useRouter()
const nowDate = ref(new Date())
const currentDate = computed(() => {
  return dayjs(nowDate.value).format('YYYY年MM月DD日')
})
const currentWeekDay = computed(() => {
  const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
  return weekDays[dayjs(nowDate.value).day()]
})
const nowTime = computed(()=>{
  return dayjs(nowDate.value).format('HH:mm:ss')
})
const centerTitle = ref('星间节点故障测试系统')
function goLayout(){
  console.log(1,"111");
  
  router.push('/')
}
onMounted(()=>{
  setInterval(()=>{
    nowDate.value = new Date()
  },1000)
  //动态生成的下拉菜单添加扫描线效果
  const addScanlineToDropdown = () => {
    setTimeout(() => {
      const dropdown = document.querySelector('.header-dropdownPop');
      if (dropdown && !dropdown.querySelector('.tech-dropdown-scanline')) {
        const scanline = document.createElement('div');
        scanline.className = 'tech-dropdown-scanline';
        dropdown.appendChild(scanline);
      }
    }, 100);
  };
  //监听点击事件，当可能触发下拉菜单时添加扫描线效果
  document.addEventListener('click', (e) => {
    if (e.target && (e.target as Element).closest('.user-avatar')) {
      addScanlineToDropdown();
    }
  });
})
</script>

<style  lang="scss" scoped>
.header-container{
  width: 100%;
  height: 102px;
  background-image: url('@/assets/imgs/dataScreen/header-bg.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  .header-left{
    position: absolute;
    left: 0;
    top: 25%;
    display: flex;
    gap: 12px;
    align-items: center;
    transform: translateY(-50%);
    padding: 0 15px;
    z-index: 999;
    text-shadow: 0 0 10px rgba(0, 180, 255, 0.6);
    cursor: pointer;
    .header-left-date{
      font-family: 'DINAlternate', 'Orbitron', sans-serif;
      font-weight: bold;
      font-size: 25px;
      color: #F18835;
      text-align: left;
      font-style: normal;
      letter-spacing: 1px;
      position: relative;  
      &::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: -4px;
        width: 100%;
        height: 1px;
        background: linear-gradient(90deg, transparent, #F18835, transparent);
        opacity: 0.7;
      }
    }  
    .header-left-weekDay{ 
      font-family: 'PingFangSC', 'Rajdhani', sans-serif;
      font-weight: 500;
      font-size: 16px;
      color: #00BDFF;
      text-align: left;
      font-style: normal;
      position: relative;
      padding: 3px 10px;
      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 3px;
        height: 100%;
        background: #00BDFF;
        opacity: 0.8;
        border-radius: 2px;
      }
    }
    
    .header-left-time{
      font-family: 'PingFangSC', 'Rajdhani', sans-serif;
      font-weight: 400;
      font-size: 16px;
      color: #00BDFF;
      text-align: left;
      font-style: normal;
      position: relative;
      border-left: 1px solid rgba(0, 189, 255, 0.3);
      padding-left: 10px;
      
      &::after {
        content: '';
        position: absolute;
        top: 50%;
        right: -15px;
        width: 5px;
        height: 5px;
        background: #00BDFF;
        border-radius: 50%;
        transform: translateY(-50%);
        box-shadow: 0 0 6px #00BDFF;
        animation: pulse 2s infinite;
      }
    }
    
    @keyframes pulse {
      0% {
        opacity: 0.4;
        transform: translateY(-50%) scale(0.8);
      }
      50% {
        opacity: 1;
        transform: translateY(-50%) scale(1.2);
      }
      100% {
        opacity: 0.4;
        transform: translateY(-50%) scale(0.8);
      }
    }
  }
  .header-center{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
    cursor: pointer;
    
    .title-text {
      position: relative;
      display: inline-block;
      font-family: 'DINAlternate', 'Orbitron', sans-serif;
      font-size: 30px;
      font-weight: 600;
      color: #FFFFFF;
      letter-spacing: 2px;
      text-shadow: 
        0 0 8px rgba(0, 180, 255, 0.8),
        0 0 15px rgba(0, 180, 255, 0.5);
      animation: text-glow 3s infinite alternate;
      
      &::before, &::after {
        content: '';
        position: absolute;
        top: 50%;
        width: 30px;
        height: 2px;
        background: linear-gradient(90deg, rgba(0, 180, 255, 0.8), transparent);
      }
      
      &::before {
        left: -40px;
        transform: translateY(-50%);
      }
      
      &::after {
        right: -40px;
        transform: translateY(-50%) rotate(180deg);
      }
    }
  }
  .header-right{
    position: absolute;
    right: 3%;
    top: 25%;
    transform: translateY(-50%);
    .setting-item {
      height: 100%;
      width: 54px;
      padding: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: visible;
      transition: all 0.3s;
      cursor: pointer;
      border-radius: 4px;
      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 60, 120, 0.2);
        opacity: 0;
        transition: opacity 0.3s;
        z-index: -1;
        border-radius: 4px;
      }
      
      .user-avatar {
        position: relative;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        overflow: hidden;
        background: rgba(0, 40, 80, 0.4);
        border: 1px solid rgba(0, 180, 255, 0.5);
        box-shadow: 0 0 10px rgba(0, 180, 255, 0.3);
        transition: all 0.3s ease;
        
        &::before {
          content: '';
          position: absolute;
          inset: 0;
          background: radial-gradient(circle at center, transparent 50%, rgba(0, 180, 255, 0.15));
          z-index: 1;
        }
        
        .scan-line {
          position: absolute;
          width: 100%;
          height: 2px;
          background: linear-gradient(90deg, 
            transparent 0%,
            rgba(0, 180, 255, 0.5) 30%,
            rgba(0, 180, 255, 0.8) 50%,
            rgba(0, 180, 255, 0.5) 70%,
            transparent 100%
          );
          top: 0;
          left: 0;
          filter: blur(1px);
          opacity: 0;
          z-index: 3;
          box-shadow: 0 0 5px rgba(0, 180, 255, 0.6);
          transition: opacity 0.3s;
          animation: scan-animation 2s linear infinite;
        }
        
        .ring-effect {
          position: absolute;
          inset: -2px;
          border-radius: 50%;
          border: 2px solid transparent;
          opacity: 0;
          transition: all 0.4s ease;
          z-index: 2;
          background: transparent;
        }
        
        .user-icon {
          width: 26px;
          height: 26px;
          position: relative;
          z-index: 2;
          filter: drop-shadow(0 0 2px rgba(0, 180, 255, 0.6));
          transition: all 0.3s;
        }
      }
      
      .hud-corner {
        position: absolute;
        width: 8px;
        height: 8px;
        pointer-events: none;
        z-index: 5;
        opacity: 0;
        transition: all 0.3s ease;
        
        &.top-left {
          top: 0;
          left: 0;
          border-top: 1px solid rgba(0, 180, 255, 0.7);
          border-left: 1px solid rgba(0, 180, 255, 0.7);
        }
        
        &.top-right {
          top: 0;
          right: 0;
          border-top: 1px solid rgba(0, 180, 255, 0.7);
          border-right: 1px solid rgba(0, 180, 255, 0.7);
        }
        
        &.bottom-right {
          bottom: 0;
          right: 0;
          border-bottom: 1px solid rgba(0, 180, 255, 0.7);
          border-right: 1px solid rgba(0, 180, 255, 0.7);
        }
        
        &.bottom-left {
          bottom: 0;
          left: 0;
          border-bottom: 1px solid rgba(0, 180, 255, 0.7);
          border-left: 1px solid rgba(0, 180, 255, 0.7);
        }
      }
      
      .beam-effect {
        position: absolute;
        bottom: -4px;
        left: 50%;
        transform: translateX(-50%);
        width: 60%;
        height: 2px;
        background: linear-gradient(
          90deg,
          transparent,
          rgba(0, 180, 255, 0.8),
          transparent
        );
        filter: blur(1px);
        z-index: 5;
        opacity: 0;
        box-shadow: 0 0 8px rgba(0, 180, 255, 0.6);
        transition: opacity 0.3s;
      }
      
      &:hover {
        &::before {
          opacity: 1;
        }
        
        .user-avatar {
          box-shadow: 0 0 15px rgba(0, 180, 255, 0.5);
          transform: translateY(-2px);
          
          .scan-line {
            opacity: 1;
          }
          
          .user-icon {
            filter: drop-shadow(0 0 4px rgba(0, 180, 255, 0.8));
          }
          
          .ring-effect {
            opacity: 1;
            border-color: rgba(0, 180, 255, 0.7);
            animation: ring-pulse 2s infinite;
          }
        }
        
        .hud-corner {
          opacity: 1;
          width: 12px;
          height: 12px;
        }
        
        .beam-effect {
          opacity: 1;
          animation: header-beam 2s infinite alternate;
        }
      }
    }
  }
}
@keyframes text-glow {
  0% {
    text-shadow: 
      0 0 8px rgba(0, 180, 255, 0.6),
      0 0 15px rgba(0, 180, 255, 0.3);
    color: rgba(255, 255, 255, 0.9);
  }
  100% {
    text-shadow: 
      0 0 15px rgba(0, 180, 255, 0.8),
      0 0 25px rgba(0, 180, 255, 0.5);
    color: #FFFFFF;
  }
}
@keyframes scan-animation {
  0% {
    top: -2px;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    top: 40px;
    opacity: 0;
  }
}
@keyframes header-beam {
  0% {
    opacity: 0.5;
    width: 40%;
  }
  100% {
    opacity: 1;
    width: 80%;
  }
}
@keyframes ring-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 180, 255, 0.4);
  }
  70% {
    box-shadow: 0 0 0 6px rgba(0, 180, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 180, 255, 0);
  }
}


</style>

